<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库表展示</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
{#    <link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css" />#}
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 90%; margin: 0 auto; display: flex; }
        .tab-buttons { display: flex; flex-direction: column; width: 20%; border-right: 1px solid #ddd; }
        .tab-buttons button { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; margin-bottom: 10px; text-align: left; }
        .tab-buttons button:hover { background-color: #0056b3; }
        .tab-buttons button.active { background-color: #0056b3; }
        .tab-content-container { width: 80%; padding: 20px; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <div class="container">
        <div class="tab-buttons">
            {% for table_name in table_names %}
                <button class="tab-button" data-tab="{{ table_name }}">{{ table_name }}</button>
            {% endfor %}
        </div>
        <div class="tab-content-container">
            {% for table_name, table_data in tables.items() %}
                <div class="tab-content" id="{{ table_name }}">
                    <h3>{{ table_name }}</h3>
                    <table>
                        <thead>
                            <tr>
                                {% for column in table_data.columns %}
                                    <th>{{ column }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in table_data.rows %}
                                <tr>
                                    {% for value in row %}
                                        <td>{{ value }}</td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endfor %}
        </div>
    </div>

    <script src="../../static/admin/layui2.9.13/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var tabButtons = document.querySelectorAll('.tab-button');
            tabButtons.forEach(function(button) {
                button.addEventListener('click', function() {
                    var tabName = this.getAttribute('data-tab');
                    document.querySelectorAll('.tab-content').forEach(function(tab) {
                        tab.classList.remove('active');
                    });
                    document.querySelectorAll('.tab-button').forEach(function(btn) {
                        btn.classList.remove('active');
                    });
                    document.getElementById(tabName).classList.add('active');
                    this.classList.add('active');
                });
            });

            // 默认显示第一个Tab
            tabButtons[0].click();
        });
    </script>
</body>
</html>